<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/lib/datatables/1.10.21/datatables.min.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="/admin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title></title>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计分析 <span class="c-gray en">&gt;</span> 按工器具分类统计
    <a class="btn btn-primary radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
    <a href="" class="btn btn-primary radius" id="toExcel" download="工器具分类统计表">导出excel</a>
    <form action="/{{config('constant.name_admin')}}/statistics/statisticsByToolClass" method="post">
        <div class="text-c mt-5">
            <span>批次：
                 <input type="text" class="input-text mt-5" name="batchNum" value="{{$batchNum}}" style="width:120px;" autocomplete="on">
            </span>
            <span class="ml-10">日期范围：
                <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" name="date_start" id="datemin" class="input-text Wdate mt-5" style="width:120px;" value="{{$date_start}}">
                -
                <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" id="datemax" name="date_end" class="input-text Wdate mt-5" style="width:120px;" value="{{$date_end}}">
            </span>

            @csrf

            <button type="submit" class="btn btn-success radius mt-5">
                <i class="Hui-iconfont">&#xe665;</i> 查询
            </button>
        </div>
    </form>
    <div class="mt-20">
        <table class="table table-border table-bordered table-hover table-bg table-responsive" id="datatable">
            <thead>
            <tr>
                <th scope="col" colspan="4">批次：{{$batchNum}} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 日期范围：{{$date_start}} 至 {{$date_end}}</th>
            </tr>
            <tr class="text-c">
                <th width="25%">分类名称</th>
                <th width="25%">送检数量</th>
                <th width="25%">不合格数量</th>
                <th width="25%">合格率</th>
            </tr>
            </thead>
            <tbody>
            @if ($data['count'] == 0)
                <tr class="text-c">
                    <td colspan="4" style="text-align: left;">记录为空</td>
                </tr>
            @else
                @foreach ($data['data'] as $val)
                    <tr class="text-c">
                        <td>{{ $val->name }}</td>
                        <td>{{ $val->total }}</td>
                        <td>{{ $val->unpassed }}</td>
                        <td>{{ $val->lv }} %</td>
                    </tr>
                @endforeach
                <tr class="text-c">
                    <td>合计</td>
                    <td>{{$data['heji']['totalnum']}}</td>
                    <td>{{$data['heji']['unpassednum']}}</td>
                    <td>{{$data['heji']['lv']}}%</td>
                </tr>
            @endif
            </tbody>
        </table>
    </div>
    <div class="mt-10">
        {{-- 为ECharts准备一个具备大小（宽高）的Dom --}}
        {{-- 46px 一个 --}}
        <div id="echarts" style="width: auto;height:{{$data['count']*40 + 60}}px;"></div>
    </div>
    <div class="mt-10">
        <div class="mb-10">
            <a href="" class="btn btn-primary radius" onclick="toExcelTab(this,'datatable1')" download="工器具委托单位+分类统计表">导出excel</a>
        </div>
        <table class="table table-border table-bordered table-hover table-bg table-responsive" id="datatable1">
            <thead>
            <tr>
                <th scope="col" colspan="5">批次：{{$batchNum}} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 日期范围：{{$date_start}} 至 {{$date_end}}</th>
            </tr>
            <tr class="text-c">
                <th width="20%">委托单位</th>
                <th width="20%">分类名称</th>
                <th width="20%">送检数量</th>
                <th width="20%">不合格数量</th>
                <th width="20%">合格率</th>
            </tr>
            </thead>
            <tbody>
            @if ($data['count'] == 0)
                <tr class="text-c">
                    <td colspan="5" style="text-align: left;">记录为空</td>
                </tr>
            @else
                @foreach ($data['comData'] as $com => $val)
                    @php $count = count($val); $total = $unpassed = $lv = 0;@endphp
                    @foreach($val as $i => $item)
                        @php
                            $total += $item->total;
                            $unpassed += $item->unpassed;
                            $lv += $item->lv*100;
                        @endphp
                        <tr class="text-c">
                            @if($i === 0)
                                <td rowspan="{{$count}}">{{ $com === '' ? '未知' : $com }}</td>
                            @endif
                            <td>{{ $item->name }}</td>
                            <td>{{ $item->total }}</td>
                            <td>{{ $item->unpassed }}</td>
                            <td>{{ $item->lv }} %</td>
                        </tr>
                        @if($i === ($count -1))
                            <tr class="text-c success">
                                <td colspan="2">合计</td>
                                <td>{{ $total }}</td>
                                <td>{{ $unpassed }}</td>
                                <td>{{ round($lv/$count/100,2) .'%' }}</td>
                            </tr>
                        @endif
                    @endforeach
                @endforeach
                <tr class="text-c">
                    <td colspan="2">汇总合计</td>
                    <td>{{$data['heji']['totalnum']}}</td>
                    <td>{{$data['heji']['unpassednum']}}</td>
                    <td>{{$data['heji']['lv']}}%</td>
                </tr>
            @endif
            </tbody>
        </table>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/admin/lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script src="/admin/lib/echarts/echarts-bar.min.js"></script>
<script type="text/javascript" src="/admin/lib/datatables/1.10.21/datatables.min.js"></script>
<script type="text/javascript" src="/admin/static/myfolder/js/statistics/common.js?ver={{config('constant.static_res_ver')}}"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    $('#datatable').DataTable({
        fixedHeader: true,
        ordering: false, // 是否排序
        paging: false, //禁用分页
        searching: false,
        info: false,
    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis',
            // formatter:'{b}<br>{a0}：{c0}<br>{a1}：{c1}',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['试验总量', '不合格数量'],
            itemGap: 70,
            textStyle: {
                fontSize: 16
            },
            top: 20
        },
        color: [
            '#3398DB', '#c23531', '#2f4554', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
        ],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            type: 'category',
            show: true,
            inverse: true,//是否是反向坐标轴
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                fontSize: 16,
                color: '#1A73E8',
                fontWeight: 'bold'
            },
            data: []
        },
        series: [
            {
                name: '试验总量',
                type: 'bar',
                legendHoverLink: false,//是否启用图例 hover 时的联动高亮
                roundCap: 30,
                // stack: '总量',
                barWidth: 30,//柱图宽度
                // barGap : '-30%',
                label: {
                    show: true,
                    fontSize: 16,
                    position: 'right'
                },
                itemStyle: {
                    barBorderRadius: [0, 15, 15, 0]//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
                },
                data: []
            },
            {
                name: '不合格数量',
                type: 'bar',
                legendHoverLink: false,//是否启用图例 hover 时的联动高亮
                // stack: '总量',
                barWidth: 26,//柱图宽度
                barGap: '-94%',
                // barMaxWidth: 30,
                // barMinWidth: 30,
                // barCategoryGap : '1%',
                label: {
                    show: true,
                    fontSize: 16,
                    textBorderColor: '#fff',
                    textBorderWidth: 2,
                    position: 'right'
                },
                itemStyle: {
                    barBorderRadius: [0, 15, 15, 0] //（顺时针左上，右上，右下，左下）//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
                },
                data: []
            },
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 填入数据
    var data = "{{$data['echarts_data']}}";
    data = JSON.parse(HTMLDecode(data));
    myChart.setOption({
        yAxis: {
            data: data.name
        },
        series: [
            {
                // 根据名字对应到相应的系列
                name: '试验总量',
                data: data.total
            },
            {
                // 根据名字对应到相应的系列
                name: '不合格数量',
                data: data.unpassed
            },
        ]
    });

    window.addEventListener("resize", function () {
        myChart.resize();
    });

    //HTML反转义
    function HTMLDecode(text) {
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    }
</script>
</body>
</html>
